<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" :width="1000" destroy-on-close @closed="$emit('closed')">
		<el-form :model="form" :rules="rules" ref="dialogForm" label-width="100px" label-position="left">
				<el-steps :active="active" align-center style="margin-bottom: 20px;">
					<el-step title="基本属性设置"></el-step>
					<el-step title="查询条件设置"></el-step>
					<el-step title="统计报表设置"></el-step>
				</el-steps>
				<el-row>
					<el-col>
						<el-form v-if="active==0" ref="stepForm_0" :model="form" :rules="rules" label-position="left">
							<el-form-item label="排序号" prop="sortNo">
								<el-input-number v-model="form.sortNo" placeholder="排序号" clearable></el-input-number>
							</el-form-item>
							<el-form-item label="报表名称" prop="title">
								<el-input v-model="form.title" placeholder="报表名称" clearable maxlength="50"></el-input>
							</el-form-item>
							<el-form-item label="关联公文" prop="flowId">
								<el-select v-model="form.flowId" style="width: 100%" placeholder="关联公文" clearable>
									<el-option v-for="item in flowOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="查询权限(人员)" prop="userRole">
								<select-user-dialog v-model:accountId="form.userRole"  :mode="true"/>
							</el-form-item>
							<el-form-item label="查询权限(部门)" prop="deptRole">
								<select-dept-dialog v-model:deptId="form.deptRole" :mode="true"/>
							</el-form-item>
							<el-form-item label="查询权限(职务)" prop="userRole">
								<select-user-level-dialog v-model:levelId="form.levelRole" :mode="true"/>
							</el-form-item>
							<el-form-item label="备注说明" prop="remark">
								<el-input type="textarea" v-model="form.remark" placeholder="备注说明" maxlength="50"></el-input>
							</el-form-item>
						</el-form>
						<el-form v-if="active==1" ref="stepForm_1" :model="form" :rules="rules" label-position="top">
							<el-form-item label="查询字段" prop="list">
								<sc-form-table v-model="form.queryFieldsArr" :addTemplate="addTemplate" drag-sort placeholder="暂无数据">
									<el-table-column prop="queryField" label="字段名" width="200">
										<template #default="scope">
											<el-select v-model="scope.row.field" placeholder="请选择">
												<el-option v-for="item in formFieldList" :key="item.id" :label="item.label" :value="item.id"></el-option>
											</el-select>
										</template>
									</el-table-column>
									<el-table-column prop="type" label="类型" width="200" >
										<template #default="scope">
											<el-select v-model="scope.row.type" placeholder="请选择">
												<el-option v-for="item in typeDic" :key="item.value" :label="item.label" :value="item.value"></el-option>
											</el-select>
										</template>
									</el-table-column>
									<el-table-column prop="text" label="显示名称">
										<template #default="scope">
											<el-input v-model="scope.row.text" placeholder="显示名称"></el-input>
										</template>
									</el-table-column>
								</sc-form-table>
							</el-form-item>
						</el-form>
						<el-form v-if="active==2" ref="stepForm_2" :model="form" :rules="rules" label-position="top">
							<el-form-item label="表格表头" prop="list">
								<sc-form-table v-model="form.tableHeadArr" :addTemplate="addTemplate" drag-sort placeholder="暂无数据">
									<el-table-column prop="queryField" label="字段名" width="200">
										<template #default="scope">
											<el-select v-model="scope.row.field" placeholder="请选择">
												<el-option v-for="item in formFieldList" :key="item.id" :label="item.label" :value="item.id"></el-option>
											</el-select>
										</template>
									</el-table-column>
									<el-table-column prop="text" label="显示名称">
										<template #default="scope">
											<el-input v-model="scope.row.text" placeholder="显示名称"></el-input>
										</template>
									</el-table-column>
								</sc-form-table>
							</el-form-item>
							<el-row :gutter="24">
								<el-col :lg="12">
									<el-form-item label="是否允许导出" prop="importFlag">
										<el-radio-group v-model="form.exportFlag">
											<el-radio-button label="1">允许</el-radio-button>
											<el-radio-button label="0">禁用</el-radio-button>
										</el-radio-group>
									</el-form-item>
								</el-col>
								<el-col :lg="12">
									<el-form-item label="统计方式" prop="totalFlag">
										<el-radio-group v-model="form.totalFlag">
											<el-radio-button label="1">按分组统计</el-radio-button>
											<el-radio-button label="2">按分组列出详情</el-radio-button>
										</el-radio-group>
									</el-form-item>
								</el-col>
							</el-row>
						</el-form>
						<div style="text-align: right">
							<el-button v-if="active>0 && active<3" @click="pre" :disabled="submitLoading">上一步</el-button>
							<el-button v-if="active<2" type="primary" @click="next">下一步</el-button>
							<el-button v-if="active==2" type="primary" @click="submit" :loading="submitLoading">提交</el-button>
						</div>
					</el-col>
				</el-row>
		</el-form>
	</el-dialog>
</template>

<script>
import selectUserDialog from "@/views/module/selectUserDialog";
import selectDeptDialog from "@/views/module/selectDeptDialog";
import selectUserLevelDialog from "@/views/module/selectUserLevelDialog"

export default {
	components: {
		selectUserLevelDialog,
		selectUserDialog,
		selectDeptDialog,
	},
	data() {
		return {
			active: 0,
			submitLoading: false,
			visible: false,
			isSaveing: false,
			mode: "add",
			titleMap: {
				add: '新增流程报表',
				edit: '编辑流程报表'
			},
			flowOptions: [],
			formFieldList: [],
			addTemplate: {
				field: '',
				text: '',
				fieldText: '',
				type: 'input',
			},
			typeDic: [
				{
					label: "输入框",
					value: "input"
				},
				{
					label: "下拉框",
					value: "select"
				}
			],
			form: {
				sortNo: '',
				title: '',
				flowId: '',
				userRole: '',
				deptRole: '',
				levelRole: '',
				queryFieldsArr: [],
				tableHeadArr: [],
				queryFields:"",
				tableHead:"",
				exportFlag: '1',
				totalFlag: '1',
				model:'1'
			},
			rules: {
				title: [
					{required: true, message: '报表名称不能为空'}
				],
				sortNo: [
					{required: true, message: '排序号不能为空'}
				],
				flowId: [
					{required: true, message: '相关流程不能为空'}
				]
			}
		}
	},
	watch: {
		'form.flowId': {
			handler(val) {
				this.getBpmFieldList(val);
			}
		},
	},
	mounted() {
		this.getBpmFlowListForSelect();
	},
	methods: {
		open(mode = 'add') {
			this.mode = mode;
			this.visible = true;
			return this;
		},
		async getBpmFieldList(flowId) {
			var res = await this.$API.bpm.bpmForm.getBpmFormFieldsListForSelect.get({flowId: flowId});
			if (res.code == 200) {
				this.formFieldList = res.data;
			}
		},
		async getBpmFlowListForSelect() {
			var res = await this.$API.bpm.bpmFlow.getBpmFlowListForSelect.get({model:'1'});
			if (res.code == 200) {
				this.flowOptions = res.data;
			} else {
				this.$alert(res.message, "提示", {type: 'error'})
			}
		},
		next() {
			const formName = `stepForm_${this.active}`
			this.$refs[formName].validate((valid) => {
				if (valid) {
					this.active += 1
				} else {
					return false
				}
			})
		},
		//上一步
		pre() {
			this.active -= 1
		},
		//提交
		submit() {
			const formName = `stepForm_${this.active}`
			this.$refs[formName].validate(async(valid) => {
				if (valid) {
					this.form.queryFields = JSON.stringify(this.form.queryFieldsArr);
					this.form.tableHead = JSON.stringify(this.form.tableHeadArr);
					this.isSaveing = true;
					var res;
					if (this.mode == "add") {
						res = await this.$API.bpm.bpmReport.insertBpmReport.post(this.form);
					} else if (this.mode == "edit") {
						res = await this.$API.bpm.bpmReport.updateBpmReport.post(this.form);
					}
					this.isSaveing = false;
					if (res.code == 200) {
						this.$emit('success')
						this.$message.success("操作成功")
					} else {
						this.$alert(res.message, "提示", {type: 'error'})
					}
					this.visible = false
				}
			})
		},
		//再来一次
		again() {
			this.active = 0
		},
		setData(data) {
			this.form.reportId = data.reportId
			this.form.sortNo = data.sortNo
			this.form.title = data.title
			this.form.flowId = data.flowId
			this.form.userRole = data.userRole
			this.form.deptRole = data.deptRole
			this.form.levelRole = data.levelRole
			this.form.exportFlag = data.exportFlag
			this.form.totalFlag = data.totalFlag
			this.form.model = data.model
			this.form.queryFieldsArr = JSON.parse(data.queryFields);
			this.form.tableHeadArr = JSON.parse(data.tableHead);
		}
	}
}
</script>

<style scoped>
.el-steps:deep(.is-finish) .el-step__line {
	background: var(--el-color-primary);
}
</style>
